<div class="place-order-container">
  <div class="nav-top"></div>
  <div class="pc-width">
    <app-progress-bar [ProgressBarList]="progressBarList"></app-progress-bar>
    <form class="apartment-layout form-horizontal" [formGroup]="orderForm">
      <div class="type">
        <span>付款方式</span>
        <span>租期</span>
        <span>起租日期</span>
      </div>
      <div class="select-box">
        <div class="form-group">
          <select class="form-control"
                  name="payType"
                  formControlName="payType" [(ngModel)]="currentPayTypeValue"
                  (change)="setLeaseTime('payType',currentPayTypeValue)">
            <option *ngFor="let payType of payTypeList"
                    [value]="payType.value">{{payType.name}}
            </option>
          </select>
        </div>
        <div class="form-group">
          <select class="form-control"
                  name="leaseTime"
                  formControlName="leaseTime"
                  [(ngModel)]="currentLeaseId"
                  (change)="calcPrice()">
            <option *ngFor="let item of leaseTimeItems"
                    [value]="item.value"
                    [disabled]="item.isdisabled==true">{{item.name}}
            </option>
          </select>
        </div>
        <div class="form-group">
          <app-datepicker (sendDate)="getDate($event)"></app-datepicker>
        </div>
      </div>
      <div class="type">
        <span>个人信息</span>
        <span>证件（*为必填内容）</span>
        <span></span>
      </div>
      <div class="info-box clearfix">
        <div class="personal-info fl">
          <div class="portrait">
            <img [src]="user.portrait" alt="">
          </div>
          <div class="info">
            <p>
              <span>昵称</span>
              <span>{{user.nicname?user.nicname:user.name}}</span>
            </p>
            <p>
              <span>性别</span>
              <span *ngIf="user.sex==null||user.sex==0">未知</span>
              <span *ngIf="user.sex==1">男</span>
              <span *ngIf="user.sex==2">女</span>
            </p>
            <p class="phone-code">
              <span>手机号</span>
              <span>{{user.username}}</span>
            </p>
          </div>
        </div>
        <div class="credential-info fr">
          <div class="info-content">
            <div class="lessee">
              <div class="info-title">
                <div class="title-line lessee-line"></div>
                <div class="title-bg">
                  <app-title [titleCpt]="placeOrderTitleCptList[0]"></app-title>
                </div>
              </div>
              <div class="form-group">
                <label>真实姓名<span class="colorRed">*</span></label>
                <input type="text" placeholder="请输入真实姓名"
                       name="lesseeName" formControlName="lesseeName" required>
                <div [hidden]="orderForm.get('lesseeName').valid || orderForm.get('lesseeName').untouched">
                  <div class="wf-form-error nameInfo">
                    请输入正确的姓名
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label>身份证号<span class="colorRed">*</span></label>
                <input type="text" placeholder="请输入身份证号"
                       name="lesseePeopleId" formControlName="lesseePeopleId" required>
                <div [hidden]="orderForm.get('lesseePeopleId').valid || orderForm.get('lesseePeopleId').untouched">
                  <div class="wf-form-error">
                    请输入正确的身份证号
                  </div>
                </div>
              </div>
            </div>
            <div class="tenant">
              <div class="info-title">
                <div class="title-line"></div>
                <div class="btn-add" (click)="addConenant()">
                  <span class="wficon-add font_24"></span>
                  <span class="font_14">添加</span>
                </div>
                <div class="title-bg">
                  <app-title [titleCpt]="placeOrderTitleCptList[1]"></app-title>
                </div>
              </div>
              <div formArrayName="cotenants">
                <div *ngFor="let co of orderForm.controls.cotenants.controls;let i=index">
                  <div [formGroupName]="i">
                    <div class="remove" *ngIf="i!=0" (click)="removeConenant(co)">
                      <div class="cutLine"></div>
                      <div class="btn-remove">
                        <span class="wficon-del font_24"></span>
                        <span class="font_14">删除</span>
                      </div>
                    </div>
                    <div class="form-group">
                      <label>真实姓名<span class="colorRed">*</span></label>
                      <input type="text" placeholder="请输入真实姓名"
                             name="customerName" formControlName="customerName" required>
                      <div [hidden]="orderForm.get('cotenants.'+i).get('customerName').valid || orderForm.get('cotenants.'+i).get('customerName').untouched">
                        <div class="wf-form-error nameInfo">
                          请输入正确的姓名
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label>身份证号<span class="colorRed">*</span></label>
                      <input type="text" placeholder="请输入身份证号"
                             name="customerCard" formControlName="customerCard" required>
                      <div [hidden]="orderForm.get('cotenants.'+i).get('customerCard').valid || orderForm.get('cotenants.'+i).get('customerCard').untouched">
                        <div class="wf-form-error">
                          请输入正确的身份证号
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rent-btn-group">
        <ul style="float: left;padding-left: 16px;color: orangered">
          <li style="padding-right: 10px" *ngIf="priceInfo?.housePrice">￥{{priceInfo?.housePrice}}/月</li>
          <li style="padding-right: 10px" *ngIf="priceInfo?.strategy?.ruleName">{{priceInfo?.strategy?.ruleName}}</li>
        </ul>
        <button class="bg-green" [disabled]="!orderForm.valid" (click)="goToContractView()">下一步</button>
      </div>
    </form>
  </div>
</div>
